<template>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
  <div id="container">
    <router-view name='header'></router-view>
    <router-view></router-view>
=======
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view></router-view>
    <router-view name="footer"></router-view>
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
=======
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <router-view/>
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
  </div>
</template>

<style lang="scss">
<<<<<<< HEAD
// 引入lib下的scss库
@import '@/lib/reset.scss';
#container{
  @include rect(100%, 100%); // 宽高100%
  @include flexbox(); // 设置为弹性盒，使除开头部的部分占满全屏
  @include flex-direction(column); // 改变弹性盒布局方向
  @include overflow(auto); // 部分浏览器需要加
  .header{
     @include rect(100%, .75rem);
     @include flexbox();
     @include flex-direction(column);
     .search{
     @include rect(100%, .43rem);
     }
     .nav{
     @include rect(100%, .32rem);
     @include overflow(auto);
     @include clearfix();
     position: fixed;
     top: 0.43rem;
     left: 0;
     z-index: 1;
     }
   }
  .box{
    @include flex();
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    @include overflow(auto); // 部分浏览器需要加
=======
@import '@/lib/reset.scss';
.container {
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box{
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto);
    @include flexbox();
    @include flex-direction(column);
  }
  .header{
    @include rect(100%,0.44rem);
    @include background-color(#f66);
    @include color(#fff);
    @include font-size(18px);
  }
  .content{
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto);
  }
  .footer{
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex(); // flex: 1;
        @include rect(auto, 100%);
        // 水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();

        &.router-link-exact-active,.router-link-active {
          @include color(#f66)
        }

        span {
          @include font-size(24px);
        }
        p {
          @include font-size(12px);
        }
      }
    }
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
  }
}
</style>
=======
    <router-view></router-view>
</template>
>>>>>>> 466a1d600ce65f8e3bdcad18a08a41e8b81613e5
